<template>
	<div>
		<Modal v-model="data.isShow" width="300">
			<p slot="header" style="font-size: .14rem;color: #8B7B83;">
				<span>会员验证</span>
			</p>
			<div style="padding-right: .2rem;">
				<Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="80">
                    <FormItem label="会员卡：" prop="cardNo">
                        <Input v-model="data.data.cardNo" placeholder="请刷卡" class="input"></Input>
                    </FormItem>
                    <FormItem label="密码：" prop="password">
                        <Input type="password" v-model="data.data.password" placeholder="请输入密码" class="input"></Input>
                    </FormItem>
                </Form>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="data.isLoading" @click="clickSubmit">验证</Button>
				<Button @click="data.isShow = false">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import {formatTimestamp} from '@/common/js/date_util.js'
export default {
    props: ['data'],
    components: {

    },
	data() {
		return {
			ruleValidate: {
                cardNo: [
                    { required: true, message: '请刷卡', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            }
		}
	},
	mounted() {
		
	},
	methods: {
		clickSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.data);
                } else {
                    this.$Message.error('Fail!');
                }
            })
        }
	}
}
</script>

<style scoped lang="less">
.input {
    border: 1px solid #D5CED2;
    border-radius: 5px;
}
</style>